<script setup>
import { ref, onMounted } from 'vue'
import SaMap from '@/components/common/samap.vue';
import * as echarts from 'echarts';
import { dataCount, speciesStatistics, queryByInput, Grids, Gnqh, locationMediaPage, GridsData, loaltionData, GridsMediaPage, areaData, areaMediaPage } from '@/utils/api.js'
import pc440 from '@/assets/images/pc440.png'
import pc450 from '@/assets/images/pc450.png'
import pc200 from '@/assets/images/pc200.png'
import pc100 from '@/assets/images/pc100.png'
import shipin from '@/assets/images/shipin.jpg'
let areaId = '';
let gridid = [];
let ghid = [];
const iswgp = ref(false);
const cnmdw = ref(true);
const morData = ref({});
const times = ref('');
const timeStr = ref('');
const isgdzp = ref(false);
const isSpecies = ref(false);
const wgName = ref('0');
const layNum = ref(0);
const realTimeNum = ref(0);
const recoverNum = ref(0);
const currentPage = ref(1);
const totalElements = ref(0);
const pageNum = ref(0);
const mediaList = ref([]);
const SpeciesList = ref([]);
const list = ref([]);
const animalInfo = ref([]);
const majorEnvirType = ref([]);
const loading = ref(false);
const activeName = ref("全部物种分布")
const ol = ref(null);
const general = ref([]);
const layerType = ref('网格');
const keywords = ref('');
const gridMap = ref({});
let options = [];
const typelist = [
    {
        id: "fnsjkfs02391",
        value: "按网格",
        label: "网格"
    },
    {
        id: "fnsjkfs02392",
        value: "按区域",
        label: "区域"
    },
    {
        id: "fnsjkfs02393",
        value: "热力分布",
        label: "热力"
    },
    {
        id: "fnsjkfs02394",
        value: "点位分布",
        label: "点位"
    }
]

const handleSelects = (item, index) => {
    getspeciesStatistics()
};

const remoteMethod = (query) => {
    if (query) {
        queryByInput(query).then(res => {
            if (res.code == '200') {
                loading.value = true
                setTimeout(() => {
                    loading.value = false
                    options = res.data.filter((item) => {
                        return item.toLowerCase().includes(query.toLowerCase())
                    })
                }, 200)
            }
        })
    } else {
        options = []
    }
}

const clkw = () => {
    getspeciesStatistics()
}

const drawLine = (demo, xa, data, title) => {
    if (document.getElementById(demo) == null) {
        return
    }
    echarts.dispose(document.getElementById(demo));
    let myChartline = echarts.init(document.getElementById(demo));
    let option = {
        backgroundColor: '#F5F7FA',
        title: {
            textStyle: {
                fontSize: 14 // 设置标题的字体大小
            },
            text: title,
            top: 10,
            left: 10
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            right: 10,
            top: 10
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '5%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xa,
        },
        yAxis: {
            type: 'value'
        },
        series: data
    };
    myChartline.setOption(option);
    window.addEventListener('resize', function () {
        // 调用 resize 方法重新绘制图表
        myChartline.resize();
    });
}

const handleCurrentChange = (val) => {
    pageNum.value = val;
    lookm(morData.value);
}

const drawpie2 = (dom, data, title, level) => {
    if (document.getElementById(dom) == null) {
        return
    }
    echarts.dispose(document.getElementById(dom));
    let myChart = echarts.init(document.getElementById(dom));
    // var data = data;
    var dataHigh = data[0].value;
    var dataMiddle = data[1].value;
    var dataLow = data[2].value;
    var total = 0;
    for (var i = 0; i < data.length; i++) {
        total += data[i].value;
    }

    let option = {
        backgroundColor: '#F5F7FA',
        title: [
            {
                textStyle: {
                    fontSize: 14 // 设置标题的字体大小
                },
                text: title,
                top: 10,
                left: 10
            },
            {
                text: '国家一级',
                bottom: '5%',
                left: '15%',
                textAlign: 'center',
                textStyle: {
                    color: '#666',
                    fontSize: 14,
                    fontWeight: 'normal',
                    textAlign: 'center',
                }
            },
            {
                text: '国家二级',
                bottom: '5%',
                left: '50%',
                textAlign: 'center',
                textStyle: {
                    color: '#666',
                    fontSize: 14,
                    fontWeight: 'normal',
                    textAlign: 'center'
                }
            },
            {
                text: '其他',
                bottom: '5%',
                left: '85%',
                textAlign: 'center',
                textStyle: {
                    color: '#666',
                    fontSize: 14,
                    fontWeight: 'normal',
                    textAlign: 'center'
                }
            }
        ],
        graphic: [
            {
                type: 'text',
                top: '48%',
                left: '12%',
                style: {
                    text: dataHigh + '种',
                    font: '14px "microsoft yahei"',
                    textAlign: 'center',
                    fill: '#F84848'
                }
            },
            {
                type: 'text',
                top: '48%',
                left: '47%',
                style: {
                    text: dataMiddle + '种',
                    font: '14px "microsoft yahei"',
                    textAlign: 'center',
                    fill: '#FCBE47'
                }
            },
            {
                type: 'text',
                top: '48%',
                left: '82%',
                style: {
                    text: dataLow + '种',
                    font: '14px "microsoft yahei"',
                    textAlign: 'center',
                    fill: '#9747FF'
                }
            }
        ],
        tooltip: {
            show: false
        },
        series: [
            {
                name: '国家一级',
                type: 'pie',
                center: ['15%', '50%'],
                radius: ['30%', '45%'],
                startAngle: 180, //起始角度
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                data: [
                    {
                        value: dataHigh,
                        name: '',
                        itemStyle: {
                            color: '#F84848'
                        }
                    },
                    {
                        name: '',
                        emphasis: {
                            itemStyle: {
                                color: '#e6e9f0'
                            }
                        },
                        itemStyle: {
                            color: '#e6e9f0'
                        },
                        value: total - dataHigh // 总数减去当前项数(灰色占比)
                    }
                ]
            },
            {
                name: '国家二级',
                type: 'pie',
                center: ['50%', '50%'],
                radius: ['30%', '45%'],
                startAngle: 180, //起始角度
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                data: [
                    {
                        value: dataMiddle,
                        name: '',
                        itemStyle: {
                            color: '#FCBE47'
                        }
                    },
                    {
                        name: '',
                        emphasis: {
                            itemStyle: {
                                color: '#e6e9f0'
                            }
                        },
                        itemStyle: {
                            color: '#e6e9f0'
                        },
                        value: total - dataMiddle // 总数减去当前项数(灰色占比)
                    }
                ]
            },
            {
                name: '其他',
                type: 'pie',
                center: ['85%', '50%'],
                radius: ['30%', '45%'],
                startAngle: 180, //起始角度
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                data: [
                    {
                        value: dataLow,
                        name: '',
                        itemStyle: {
                            color: '#9747FF'
                        }
                    },
                    {
                        name: '',
                        emphasis: {
                            itemStyle: {
                                color: '#e6e9f0'
                            }
                        },
                        itemStyle: {
                            color: '#e6e9f0'
                        },
                        value: total - dataLow // 总数减去当前项数(灰色占比)
                    }
                ]
            }
        ]
    };

    myChart.setOption(option);

    window.addEventListener('resize', function () {
        // 调用 resize 方法重新绘制图表
        myChart.resize();
    });

    if (level != undefined) {
        myChart.on('click', function (params) {
            let typeName = params.seriesName
            level.forEach(e => {
                if (e.levelTitle == typeName) {
                    SpeciesList.value = e.levelSpecies;
                    isSpecies.value = true;
                    return false
                }
            })
        });
    }
}

const drawbar = (dom, x, y, title, space) => {
    if (document.getElementById(dom) == null) {
        return
    }
    echarts.dispose(document.getElementById(dom));
    let myChart = echarts.init(document.getElementById(dom));
    let option = {
        backgroundColor: '#F5F7FA',
        title: {
            textStyle: {
                fontSize: 14 // 设置标题的字体大小
            },
            text: title,
            top: 10,
            left: 10
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '5%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: x
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: y,
                type: 'bar',
                barWidth: '30',
                itemStyle: {
                    borderRadius: 10, // 设置圆角半径
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#387BFF' },
                        { offset: 1, color: '#387BFF00' }
                    ])
                }
            }
        ]
    };

    myChart.setOption(option);
    window.addEventListener('resize', function () {
        // 调用 resize 方法重新绘制图表
        myChart.resize();
    });

    if (space != undefined) {
        myChart.on('click', function (params) {
            let typeName = params.name
            space.forEach(e => {
                if (e.typeName == typeName) {
                    SpeciesList.value = e.typeSpecies;
                    isSpecies.value = true;
                    return false
                }
            })
        });
    }


}

const drawPie = (dom, data, title, jlx) => {
    if (document.getElementById(dom) == null) {
        return
    }
    echarts.dispose(document.getElementById(dom));
    let myChart = echarts.init(document.getElementById(dom));
    let sum = 0;
    let legenName = [];
    data.forEach((item) => {
        sum += item.value;
        legenName.push(item.name)
    });
    let option = {
        backgroundColor: '#F5F7FA',
        title: {
            textStyle: {
                fontSize: 14 // 设置标题的字体大小
            },
            text: title,
            top: 10,
            left: 10
        },
        tooltip: {
            trigger: 'item',
            // formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            formatter: (name) => {
                if (data.length) {
                    const item = data.filter((item) => item.name === name)[0];
                    return `${name}` + '  (' + `${((item.value / sum) * 100).toFixed(1)}%` + ')';
                }
            },
            data: legenName
        },
        series: [
            {
                name: '生境统计',
                type: 'pie',
                radius: ['20%', '80%'],
                center: ['35%', '55%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 4
                },
                label: {
                    show: true,
                    position: 'inside',
                    formatter(item) {
                        return `${item.value}`;
                    },
                    fontSize: 14,
                    color: '#000',
                    fontFamily: 'albbhpt-medium'
                },
                labelLine: {
                    show: false
                },
                data: data
            }
        ]
    };
    myChart.setOption(option);

    window.addEventListener('resize', function () {
        // 调用 resize 方法重新绘制图表
        myChart.resize();
    });

    if (jlx != undefined) {
        myChart.on('click', function (params) {
            let typeName = params.name
            jlx.forEach(e => {
                if (e.typeName == typeName) {
                    SpeciesList.value = e.typeSpecies;
                    isSpecies.value = true;
                    return false
                }
            })
        });
    }
}

const getdataCount = async () => {
    let res = await dataCount(areaId)
    if (res.code == '200') {
        let gr = [{
            border: '#9747FF',
            color: 'rgba(151, 71, 255, 0.10)'
        },
        {
            border: '#387BFF',
            color: 'rgba(56, 123, 255, 0.10) '
        },
        {
            border: '#FCD60F',
            color: 'rgba(252, 214, 15, 0.10)'
        },
        {
            border: '#0AD0A1',
            color: 'rgba(10, 208, 161, 0.10)'
        }]

        res.data.countShowArr.forEach((e, x) => {
            e['border'] = gr[x].border;
            e['color'] = gr[x].color;
        })
        general.value = res.data.countShowArr


        let jlx = [];
        res.data.residentTypeArr.forEach(e => {
            let z = { value: e.typeSum, name: e.typeName };
            jlx.push(z)
        })

        drawPie('chart5', jlx, '鸟类居留型', res.data.residentTypeArr);


        let lc = [];
        res.data.levelCount.forEach(e => {
            let z = {
                name: e.levelTitle,
                value: e.levelSum
            }
            lc.push(z)
        })
        if (lc.length > 0) {
            drawpie2('chart3', lc, '保护等级统计', res.data.levelCount);
        }

        let iucx = [], iucy = [];
        res.data.iucnArr.forEach(e => {
            iucx.push(e.typeName);
            iucy.push(e.typeSum);
        })
        drawbar('chart4', iucx, iucy, 'IUCN红色名录统计', res.data.iucnArr);
        let mt = [];
        res.data.monthArr.forEach(e => {
            let z = {
                name: e.typeName,
                type: 'line',
                stack: 'Total',
                data: e.typeCount
            }
            mt.push(z)
        })
        let mta = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        drawLine('chart2', mta, mt, '各月份频次统计');
        let da = [];
        res.data.dayArr.forEach(e => {
            let z = {
                name: e.typeName,
                type: 'line',
                stack: 'Total',
                data: e.typeCount
            }
            da.push(z)
        })
        let daa = ['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时']
        drawLine('chart', daa, da, '每日平均出现频次统计');
    }
}

const qhtype = (data) => {
    layerType.value = data.label;
    getspeciesStatistics()
}

const FilterColor = (data) => {
    let color = '';
    if (data == undefined) {
        color = 'rgba(255, 255, 255, 0.1)'
    } else {
        if (data < 100) {
            color = 'rgba(247, 28, 28, 0.60)'
        }
        if (data >= 100 && data < 200) {
            color = 'rgba(191, 12, 12, 0.50)'
        }
        if (data >= 200 && data < 450) {
            color = 'rgba(125, 0, 0, 0.70)'
        }
        if (data >= 450) {
            color = 'rgba(65, 3, 3, 0.60)'
        }
    }
    return color
}

const filterGgba = () => {
    var r = Math.floor(Math.random() * 256); // 生成 0 到 255 之间的随机整数
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    var rgbaColor = 'rgba(' + r + ', ' + g + ', ' + b + ', 0.8)';
    return rgbaColor;
}

const getPopData = (data) => {
    morData.value = data;
    cnmdw.value = true
    if (data.type == '网格') {
        let params = '?areaId=' + areaId + '&gridNumber=' + data.gridNumber
        GridsData(params).then(res => {
            if (res.code == '200') {
                wgName.value = data.gridNumber;
                let o = res.data;
                majorEnvirType.value = o.majorEnvirType;
                recoverNum.value = Number(o.recoverNum);
                layNum.value = Number(o.layNum);
                realTimeNum.value = Number(o.realTimeNum);
                animalInfo.value = o.animalInfo;
                mediaList.value = o.mediaList.slice(0, 3);
                iswgp.value = true;
            }
        })
    }
    if (data.type == '区域') {
        let params = '?areaId=' + areaId + '&keywords=' + data.gridNumber
        areaData(params).then(res => {
            if (res.code == '200') {
                wgName.value = data.gridNumber;
                let o = res.data;
                majorEnvirType.value = o.majorEnvirType;
                recoverNum.value = Number(o.recoverNum);
                layNum.value = Number(o.layNum);
                realTimeNum.value = Number(o.realTimeNum);
                animalInfo.value = o.animalInfo;
                mediaList.value = o.mediaList.slice(0, 3);
                iswgp.value = true;
            }
        })
    }
    if (data.type == '点位') {
        loaltionData(data.gridNumber).then(res => {
            if (res.code == '200') {
                cnmdw.value = false
                wgName.value = '';
                let o = {};
                majorEnvirType.value = {};
                recoverNum.value = 0;
                layNum.value = 0;
                realTimeNum.value = 0;
                animalInfo.value = {};
                mediaList.value = res.data;
                iswgp.value = true;
            }
        })
    }
}

const getspeciesStatistics = async () => {
    let params = '?areaId=' + areaId + '&type=' + activeName.value + '&layerType=' + layerType.value + '&keywords=' + keywords.value
    let res = await speciesStatistics(params)
    if (res.code == '200') {
        let iucx = [], iucy = [];
        res.data.smallEnvirArr.forEach(e => {
            iucx.push(e.typeName);
            iucy.push(e.typeSum);
        })
        drawbar('chart7', iucx, iucy, '小生境统计');

        let mt = [];
        res.data.dayArr.forEach(e => {
            let z = {
                name: e.typeName,
                type: 'line',
                stack: 'Total',
                data: e.typeCount
            }
            mt.push(z)
        })
        let mta = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']


        let da = [];
        res.data.monthArr.forEach(e => {
            let z = {
                name: e.typeName,
                type: 'line',
                stack: 'Total',
                data: e.typeCount
            }
            da.push(z)
        })
        let daa = ['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时']

        drawLine('chart8', daa, mt, '每日平均出现频次统计');
        drawLine('chart9', mta, da, '各月份频次统计');

        let ea = [];
        res.data.envirArr.forEach(e => {
            let z = { value: e.typeSum, name: e.typeName };
            ea.push(z)
        })

        drawPie('chart6', ea, '生境统计');

        ghid.forEach(e => {
            ol.value.delLayers(e)
        })
        ghid = [];
        gridid.forEach(e => {
            ol.value.delLayers(e)
        });
        gridid = [];
        ol.value.delLayers('relics001');
        ol.value.delLayers('juhedian001cs');

        if (res.data.gridMap != null && layerType.value == '网格') {
            gridMap.value = JSON.parse(JSON.stringify(res.data.gridMap))
            getGrids()
        } else {
            gridid.forEach(e => {
                ol.value.delLayers(e)
            })
            gridid = [];
        }

        if (res.data.gnqhMap != null && layerType.value == '区域') {
            getGnqh()
        } else {
            ghid.forEach(e => {
                ol.value.delLayers(e)
            })
            ghid = []
        }

        if (res.data.heatArr.length > 0 && layerType.value == '热力') {
            ol.value.addHeatMap('relics001', res.data.heatArr);
            // getGnqh()
        } else {
            ol.value.delLayers('relics001');
        }

        if (res.data.locationArr.length > 0 && layerType.value == '点位') {
            ol.value.delLayers('relics001');
            ol.value.addcluster(res.data.locationArr, 'juhedian001cs');
            // getGnqh()
        } else {
            ol.value.delLayers('juhedian001cs');
        }
    }
}

const getGrids = async () => {
    let res = await Grids(areaId)
    if (res.code == '200') {
        res.data.forEach((e, x) => {
            let z = [{
                id: e.id,
                name: e.gridNumber,
                textColor: "#a78839",
                borderColor: "#F71C1C",
                fillColor: FilterColor(gridMap.value[e.gridNumber]),
                data: {
                    gridNumber: e.gridNumber,
                    type: '网格'
                },
                geojson: e.geojson
            }]
            ol.value.addGeoJson(z, e.id);
            gridid.push(e.id)
        })
    }
}

const getGnqh = async () => {
    let res = await Gnqh(areaId)
    if (res.code == '200') {
        res.data.forEach((e, x) => {
            let z = [{
                id: e.id,
                name: e.name,
                textColor: "#a78839",
                borderColor: "#F71C1C",
                fillColor: filterGgba(),
                data: {
                    gridNumber: e.name,
                    type: '区域'
                },
                geojson: e.geojson,

            }]
            ol.value.addGeoJson(z, e.id);
            ghid.push(e.id)
        })
    }
}

const handleClick = (tab) => {
    if (tab != '全部物种分布') {
        keywords.value = ''
    }
    getspeciesStatistics()
}

const gettime = (data) => {
    if (times.value != null) {
        var year = data.getFullYear();
        var month = data.getMonth() + 1;
        var date = data.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (date >= 0 && date <= 9) {
            date = "0" + date;
        }
        var t1 = year + "-" + month + "-" + date;

        timeStr.value = t1 + "~" + t1
    } else {
        timeStr.value = "";
    }

    lookm(morData.value);
}

const lookm = (data) => {
    if (morData.value.type == '网格') {
        let params = '?areaId=' + areaId + '&gridNumber=' + morData.value.gridNumber + '&pageSize=12&pageNum=' + pageNum.value + '&timeStr=' + timeStr.value
        GridsMediaPage(params).then(res => {
            if (res.code == '200') {
                if (res.data.content.length > 0) {
                    isgdzp.value = true;
                    list.value = res.data.content;
                    totalElements.value = res.data.totalElements;
                }
            }
        })
    }
    if (morData.value.type == '区域') {
        let params = '?areaId=' + areaId + '&keywords=' + morData.value.gridNumber + '&pageSize=12&pageNum=' + pageNum.value + '&timeStr=' + timeStr.value
        areaMediaPage(params).then(res => {
            if (res.code == '200') {
                if (res.data.content.length > 0) {
                    isgdzp.value = true;
                    list.value = res.data.content;
                    totalElements.value = res.data.totalElements;
                }
            }
        })
    }
    if (morData.value.type == '点位') {
        let params = '?areaId=' + areaId + '&cameraEnvirId=' + morData.value.gridNumber + '&pageSize=12&pageNum=' + pageNum.value + '&timeStr=' + timeStr.value
        locationMediaPage(params).then(res => {
            if (res.code == '200') {
                if (res.data.content.length > 0) {
                    isgdzp.value = true;
                    list.value = res.data.content;
                    totalElements.value = res.data.totalElements;
                }
            }
        })
    }
}

const lookspanc = (data) => {
    SpeciesList.value = data.names
    isSpecies.value = true
}

onMounted(() => {
    areaId = window.sessionStorage.getItem('areaId');
    getdataCount();
    // drawPie('chart5');
    ol.value.initmap();
    setTimeout(function () {
        getspeciesStatistics();
    }, 1000)
})
</script>
<template>
    <div class="wls-aut">
        <div class="wls-aut-title" style="justify-content: space-between;">
            <div style="font-weight: 700;"><span>统计分析</span></div>
        </div>

        <div class="wls-sa dbx">
            <div class="wls-ct">
                <div class="cttile">数据总览</div>
                <div class="wls-ct1">
                    <div class="ct1" v-for="(i, index) in general" @click.stop="lookspanc(i)"
                        :style="{ backgroundColor: i.color, borderLeft: '4px solid' + i.border }" :key="i.type + 'wls'">
                        <div style="color: #606266;font-size: 0.18rem;font-weight: 700;">
                            <span>{{ i.typeName }}</span>
                        </div>
                        <div style="color: #333;font-size: 0.32rem;font-weight: 700;margin: .24rem 0;">
                            <span>{{ i.sum }}</span>
                        </div>
                        <div>
                            <i class="icon iconfont icon-zhaopian"></i>
                            <span style="margin-right: 0.24rem;">{{ i.imgSum }}张</span>
                            <i class="icon iconfont icon-shipin"></i>
                            <span>{{ i.videoSum }}条</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="wls-ct">
                <div class="cttile">动物统计</div>
                <div class="wls-ct1">
                    <div class="cdm" id="chart"></div>
                    <div class="cdm" id="chart2"></div>
                </div>
                <div style="height: .16rem;"></div>
                <div class="wls-ct1">
                    <div class="cdm" id="chart3"></div>
                    <div class="cdm" id="chart4"></div>
                    <div class="cdm" id="chart5"></div>
                </div>
            </div>

            <div class="wls-ct">
                <div class="cttile">物种统计</div>

                <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
                    <el-tab-pane label="全部物种分布" name="全部物种分布"></el-tab-pane>
                    <el-tab-pane label="常见物种分布" name="常见物种分布"></el-tab-pane>
                    <el-tab-pane label="重点保护物种分布" name="重点保护物种分布"></el-tab-pane>
                    <el-tab-pane label="兽类分布" name="兽类分布"></el-tab-pane>
                    <el-tab-pane label="鸟类分布" name="鸟类分布"></el-tab-pane>
                </el-tabs>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-button v-for="(i, index) in typelist" :key="i.id" @click="qhtype(i)"
                            :style="layerType == i.label ? 'background-color: var(--wls-color);color: #fff;' : ''">{{
                                i.value
                            }}</el-button>
                    </el-col>
                    <el-col :span="8"></el-col>
                    <el-col :span="4" v-show="activeName == '全部物种分布'">
                        <el-select v-model="keywords" style="width: 100%;" clearable filterable remote reserve-keyword
                            placeholder="填选物种名" remote-show-suffix @clear="clkw" :remote-method="remoteMethod"
                            :loading="loading">
                            <el-option v-for="(item, x) in options" :key="'item' + x" :label="item" :value="item"
                                @click.stop="handleSelects(item, index)" />
                        </el-select>
                    </el-col>
                </el-row>

                <div class="ol-box">
                    <sa-map ref="ol" @wgpup="getPopData" />
                    <div class="map-pups" v-show="layerType == '网格'">
                        <div>
                            <span style="color: #fff;font-weight: 700;">各网格频次统计</span>
                        </div>
                        <ul>
                            <li>
                                <img :src="pc440" alt="">
                                <span>450次 &lt;</span>
                            </li>
                            <li>
                                <img :src="pc450" alt="">
                                <span>450次~200次</span>
                            </li>
                            <li>
                                <img :src="pc200" alt="">
                                <span>200次~100次 &lt;</span>
                            </li>
                            <li>
                                <img :src="pc100" alt="">
                                <span>100次 &gt;</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="wls-ct1">
                    <div class="cdm" id="chart6"></div>
                    <div style="flex: 2;" class="cdm" id="chart7"></div>
                </div>
                <div style="height: .16rem;"></div>
                <div class="wls-ct1">
                    <div class="cdm" id="chart8"></div>
                    <div class="cdm" id="chart9"></div>
                </div>
            </div>
        </div>
        <!-- wgp B -->
        <div class="wgp" v-show="iswgp">
            <div>
                <div class="wgp_c_t">
                    <div v-if="cnmdw"><span>网格{{ wgName }}</span></div>
                    <div v-else></div>
                    <div class="icon iconfont icon-guanbi" @click="iswgp = false"></div>
                </div>
                <!-- 主要生境 B -->
                <div class="sjhj" v-if="cnmdw">
                    <div>
                        <span>主要生境</span>
                    </div>
                    <div class="clearfix">
                        <div v-for="i in majorEnvirType" :key="i.id">{{ i }}</div>
                    </div>
                </div>
                <!-- 主要生境 E -->
                <!-- 现有设备 B -->
                <div class="sjhj" v-if="cnmdw">
                    <div>
                        <span>现有设备&nbsp;{{ layNum + realTimeNum }}台</span>
                    </div>
                    <div class="clearfix chyc">
                        <div>
                            <span> 红外相机</span>
                            <span>{{ layNum }}台</span>
                        </div>
                        <div>
                            <span title="4G相机"> 4G相机</span>
                            <span>{{ realTimeNum }}台</span>
                        </div>
                    </div>
                </div>
                <!-- 现有设备 E -->
                <!-- 历史设备 B -->
                <div class="sjhj" v-if="cnmdw">
                    <div>
                        <span>历史设备&nbsp;{{ recoverNum }}台</span>
                    </div>
                    <div class="clearfix chyc">
                        <div>
                            <span>红外相机</span>
                            <span>{{ recoverNum }}台</span>
                        </div>
                    </div>
                </div>
                <!-- 历史设备 E -->
                <!-- 近期发现 B -->
                <div class="jqfx">
                    <div><span>近期发现</span></div>
                    <div class="pic">
                        <div><span @click="lookm()">查看更多</span></div>
                        <div class="imb">
                            <div v-for="i in mediaList" :key="i.id">
                                <img :src="i.accessorySrc" v-if="$wlsf.filiv(i.accessorySrc) == 3" alt="">
                                <img :src="shipin" v-else alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 近期发现 E -->
                <!-- 发现动物 B -->
                <div class="sjhj" v-if="cnmdw">
                    <div>
                        <span>发现动物</span>
                    </div>
                    <div class="clearfix chyc dbx">
                        <div v-for="i in animalInfo" :key="i.id">
                            <span :title="i.name">{{ i.name }}</span>
                            <span>{{ i.cishu }}次</span>
                        </div>
                    </div>
                </div>
                <!-- 发现动物 E -->
            </div>
        </div>
        <!-- wgp E -->
        <!-- mmig B -->
        <div class="gdzp" v-if="isgdzp">
            <div>
                <div class="mmigc" @click.stop="isgdzp = false">
                    <span class="icon iconfont icon-guanbi"></span>
                </div>
                <!-- 时间选择器 B -->
                <el-date-picker v-model="times" @change="gettime" type="date" placeholder="选择日期">
                </el-date-picker>
                <!-- 时间选择器 E -->
                <!-- 容器 B -->
                <div class="mmigb clearfix">
                    <div v-for=" i in list" :key="i.id">
                        <video v-if="$wlsf.filiv(i.accessorySrc) == 4" :src="i.accessorySrc" controls alt=""></video>
                        <el-image v-else style="width: 100%; height:100%" :src="i.accessorySrc" :zoom-rate="1.2"
                            :max-scale="7" :min-scale="0.2" :preview-src-list="[i.accessorySrc]" fit="cover" />
                    </div>
                </div>
                <!-- 容器 E -->
                <!-- 分页 B -->
                <div class="pages">
                    <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage"
                        :page-size="12" layout="total, prev, pager, next, jumper" :total="totalElements">
                    </el-pagination>
                </div>
                <!-- 分页 E -->
            </div>
        </div>
        <!-- mmig E -->

        <!-- 物种名称B -->
        <div class="wgp" v-if="isSpecies">
            <div class="Species dbx">
                <div class="d-lkb-c" @click.stop="isSpecies = false">
                    <i class="icon iconfont icon-guanbi" style="font-size: .3rem;"></i>
                </div>
                <div class="Species_title">
                    <div></div>
                    <span style="font-size: 0.18rem">物种名称</span>
                </div>
                <div style="height: 0.16rem;"></div>
                <div class="clearfix chyc dbx">
                    <div style="width: calc((100% - 24px) / 4)" v-for="(i, x) in SpeciesList" :key="x + 'dfsfsaqwerqf'">
                        <span style="width: 100%;text-align: center;" :title="i">{{ i }}</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 物种名称E -->

    </div>
</template>
<style scoped>
.wls-sa {
    width: 100%;
    height: calc(100% - .3rem);
    padding: 0.1rem;
    overflow: auto;
}


/* 隐藏垂直滚动条 */
.dbx::-webkit-scrollbar {
    width: 0;
    /* 隐藏垂直滚动条 */
}

.dbx::-webkit-scrollbar-horizontal {
    display: none;
}

/* 隐藏垂直滚动条（如果有） */
.dbx::-webkit-scrollbar-vertical {
    display: none;
}

/* 隐藏滚动条的滑块 */
.dbx::-webkit-scrollbar-thumb {
    background: transparent;
}


.wls-ct {
    width: 100%;
    padding: .24rem;
    margin-bottom: .16rem;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}

.wls-ct1 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct1 {
    flex: 1;
    height: 1.6rem;
    margin-right: .24rem;
    padding: 0.16rem 0.24rem;
}

.ct1:last-child {
    margin-right: 0;
}

.cttile {
    font-weight: 700;
    margin-bottom: 0.16rem;
    overflow: hidden;
}

.cdm {
    flex: 1;
    height: 3rem;
    margin-right: 0.24rem;
}

.cdm:last-child {
    margin-right: 0;
}

.ol-box {
    width: 100%;
    height: 9rem;
    position: relative;
    padding: .24rem;
}

.map-pups {
    width: 4.8rem;
    height: 1.2rem;
    padding: .16rem;
    position: absolute;
    bottom: 0.4rem;
    left: .4rem;
    border-radius: 4px 4px 0px 0px;
    background: rgba(0, 0, 0, 0.60);
}

.map-pups ul {
    width: 100%;
    overflow: hidden;
}

.map-pups ul li {
    float: left;
    width: 50%;
    height: 0.4rem;
    color: #fff;
    display: flex;
    align-items: center;
}

.map-pups ul li img {
    width: 0.2rem;
    height: 0.2rem;
    margin-right: 8px;
}

.wgp {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 10;
}

.wgp>div {
    width: 6.5rem;
    padding: 0 .16rem;
    background: #FFFFFF;
    border-radius: 8px;
    overflow: hidden;
}

.wgp_c_t {
    width: 100%;
    height: 0.54rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wgp_c_t>div:nth-child(1) {
    font-size: .16rem;
    font-weight: 700;
}

.wgp_c_t>div:nth-child(2) {
    font-size: 0.2rem;
    cursor: pointer;
}

.sjhj {
    width: 100%;
    /* height: .36rem; */
    margin-bottom: 8px;
    display: flex;
}

.sjhj>div:nth-child(1) {
    width: 1.1rem;
    height: .36rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #00CC46;
    margin-right: 8px;
    border-radius: 4px;
}

.chyc>div {
    float: left;
    width: 1.16rem;
    height: 0.36rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    margin-right: 8px;
    background: #F5F7FA;
    border-radius: 4px;
}

.chyc>div:nth-child(4n) {
    margin-right: 0;
}

.chyc>div>div>span {
    display: inline-block;
}

.chyc {
    width: 100%;
    max-height: 4rem;
    overflow-y: auto;
    overflow-x: hidden;
}

.chyc>div>span:nth-child(1) {
    width: 0.6rem;
    height: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chyc>div>span:nth-child(2) {
    color: #999999;
}

.jqfx {
    width: 100%;
    margin-bottom: 8px;
    display: flex;
}

.jqfx>div:nth-child(1) {
    width: 1.1rem;
    height: 1.6rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #00CC46;
    margin-right: 8px;
    border-radius: 4px;
}

.jqfx .pic {
    width: calc(100% - 1.2rem);
    height: 1.6rem;
    padding: 0 .1rem;
    background-color: #F5F7FA;
    overflow: hidden;
}

.jqfx .pic>div:nth-child(1) {
    width: 100%;
    height: 0.32rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #00CC46;
    text-decoration: underline;
    cursor: pointer;
}

.imb {
    width: 100%;
    height: calc(100% - .32rem);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.imb>div {
    width: 1.5rem;
    height: 1.2rem;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F9F9FA;
    border: 1px solid #E4E7ED;
    position: relative;
    overflow: hidden;
}

.mly {
    width: 0.72rem;
    height: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    bottom: 0;
    color: #fff;
    background: #00CC46;
    border-radius: 4px 0px 0px 0px;
}

.imb>div:last-child {
    margin-right: 0;
}

.imb>div img {
    max-height: 100%;
    max-width: 100%;
}

.gdzp {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 19;
}

.gdzp>div {
    width: 13.6rem;
    padding: 0.32rem;
    background-color: #fff;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.mmigc {
    font-size: 0.2rem;
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    z-index: 2;
    cursor: pointer;
}

.mmigb {
    width: 100%;
    height: 7.3rem;
    margin: 0.32rem 0;
}

.mmigb>div {
    width: 3rem;
    height: 2.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    float: left;
    margin: 0 .32rem .32rem 0;
    border: 1px solid #E4E7ED;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
}

.mmigb>div img {
    max-width: 100%;
    max-height: 100%;
}

.mmigb>div video {
    max-width: 100%;
    max-height: 100%;
}

.mmigb>div:nth-child(4n) {
    margin-right: 0;
}

.mmily {
    width: 1.3rem;
    height: 0.44rem;
    position: absolute;
    bottom: 0.16rem;
    right: 0.16rem;
    background-color: #01C144;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .22rem;
}

.pages {
    width: 100%;
    text-align: center;
}

.Species {
    height: 4rem;
    padding: .24rem !important;
    position: relative;
}

.Species_title {
    display: flex;
    align-items: center;
}

.Species_title>div:nth-child(1) {
    width: 3px;
    height: 0.16rem;
    margin-right: 8px;
    background-color: var(--wls-color);
}
</style>